

<template>
    <!-- 主体容器添加背景图片 -->
    <div class="login-container">
        <!-- 输入容器添加宽高,背景 -->
        <div class="login-box">
            <!-- 左边头像内容 -->
            <div class="login-left-portrait">
                <dl>
                    <dt><img src="../../public/image/logo.png" alt="头像"></dt>
                    <dd>欢迎!</dd>
                    <dd>智学商城-后台管理系统</dd>
                </dl>
            </div>
            <!-- 右边表单内容 -->
            <div class="login-right-form">
                <div>
                    <p>登录</p>
                    <!-- 表单 -->
                    <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" class="demo-ruleForm">
                        <el-form-item prop="username">
                        <el-input v-model.trim="ruleForm.username" type="text" autocomplete="off" :prefix-icon="User" placeholder="用户名" @keyup.enter="submitForm(ruleFormRef)"/>
                        </el-form-item>
                        <el-form-item prop="password">
                        <el-input v-model.trim="ruleForm.password" type="password" autocomplete="off" :prefix-icon="Lock" placeholder="登录密码" @keyup.enter="submitForm(ruleFormRef)"/>
                        </el-form-item>
                        <el-form-item>
                        <el-button type="primary" @click="batchAction(ruleFormRef)">登录</el-button>
                        </el-form-item>
                    </el-form>
                    <div>作者: 曹小毛</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
    import { reactive, ref } from 'vue'
    import type { FormInstance } from 'element-plus'
    // 引入element-plus的图标样式
    import { Lock,User } from '@element-plus/icons-vue'
    // 引入element-plus的消息提示框
    import { ElMessage } from 'element-plus'
    import { post } from "@/utils/index"
    // 引入js-cookie
    import cookie from "js-cookie"
    // 引入路由
    import { useRouter } from "vue-router";
    // 引入状态管理
    import { useUserStore } from "@/stores/admin/index";
    import { debounce } from "../utils/antiShakeThrottling";
    const router = useRouter()
    const store = useUserStore()
    
    
    const ruleFormRef = ref<FormInstance>()
    // 表单用户名的非空判定规则
    const validateUser = (rule: any, value: any, callback: any) => {
      if (value === '') {
        callback(new Error('用户名不能为空!'))
      } else {
        callback()
      }
    }
    // 表单密码的非空判定规则
    const validatePass = (rule: any, value: any, callback: any) => {
      if (value === '') {
        callback(new Error('密码不能为空!'))
      }  else {
        callback()
      }
    }
    // 表单数据
    let ruleForm = reactive({
      username: '',
      password: '',
    })
    
    // 表单的判定执行数据
    const rules = reactive({
        username: [{ validator: validateUser, trigger: 'blur' }],
        password: [{ validator: validatePass, trigger: 'blur' }]
    })
    // 点击确认提交按钮触发事件
    const submitForm = (formEl: FormInstance | undefined) => {
      if (!formEl) return
      formEl.validate((valid) => {
        if (valid) {
            // 需要传递的数据
            let data = {
                _gp:"admin",
                _mt:"login",
                ...ruleForm
            }
            post(data).then((res:any)=>{
                Object.assign(store.userInfo,{...ruleForm})
                if (200 === res.errno) {
                    
                    // 获取当前时间
                    let now = new Date()
                    let token = res.data
                    // 在本地时间的基础上添加30分钟
                    now.setTime(now.getTime()+1000*60*30)
                    // 使用cookir进行限时存储token，添加计时，固定时间后清除token
                    cookie.set("token",token,{expires:now})
                    return Promise.resolve(token)
                    
                }else{
                    return Promise.reject(res.errmsg)
                }
            }).then((res) => {//采用接口连调的方式，获取数据并且存储到状态管理中
                let data = {
                    _gp:"admin",
                    _mt:"info",
                }
            post(data,{headers:{AdminToken:res}}).then((res:any) => {
                // 采用解构赋值获取数据
                let { data , errmsg , errno } = res
                if (200 === errno) {
                    // 使用$patch方法进行传值，可以不用actions方法
                    store.$patch({user:data})
                    // 跳转到主页,且不能再次返回
                    router.replace({
                        path: router.currentRoute.value.query.name || "/",
                    })
                    // 登录成功提示
                    ElMessage.success("登录成功！")
                }else{
                    // 抛出错误值
                    return Promise.reject(errmsg)
                }
            }).catch((err) => {
                return Promise.reject(err)
            });
                
            }).catch((err)=>{
                // 提示错误值
                ElMessage.error(err)
            })
        } else {
          return false
        }
      })
    }

    //防抖
const batchAction = (item: FormInstance | undefined) => {
    debounce(function () {
        submitForm(item)
    }, 1000)
};
    </script>
<style lang="less" scoped>
    // 主体盒子样式
    .login-container{
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        background-image: url("../../public/image/login-back.png");
        background-size: 100% 100%;
        // 登录的盒子样式
        .login-box{     
            width: 48vw;
            height: 60vh;
            margin: auto;
            background-color: #005DE9;
            display: flex;
            justify-content: space-between;
            border-radius: 6px;
            // 左边头像样式
            .login-left-portrait{   
                width: 40%;
                height: 100%;
                text-align: center;
                display: flex;
                justify-content: center;    //对齐方式
                align-items: center;    //垂直居中
                align-content: stretch; //水平居中
                // dl样式
                dl{
                    box-sizing: border-box;
                    // 头像样式
                    dt>img{
                        width: 100px;
                        border-radius: 50%;
                        box-shadow: 5px -4px 12px 6px #5BA8FD;
                    }
                    // 字体样式
                    dd{
                        color: white;
                        font-size: 1.1vw;
                        line-height: 3.8vh;
                    }
                }
            }
            //右边表单容器样式
            .login-right-form{  
                width: 60%;
                height: 100%;
                background-color: white;
                border-radius: 0px 6px 6px 0px;
                text-align: center;
                display: flex;
                justify-content: center;
                align-content: stretch;
                align-items: center;
                // 设置P标签和div的字体大小
                p{
                    font-size: 1.6rem;
                }
                div{
                    font-size: 1rem;
                }
                .el-form{   // 表单样式
                    width: 24vw;
                    // 表单全部垂直居中
                    /deep/.el-form-item__content{
                        justify-content: center;
                        align-items: center;
                    }
                    // 设置input高度
                    /deep/.el-input__wrapper{
                        height: 5vh;
                        
                    }
                    // 设置按钮宽高
                    .el-button{
                        width: 7vw;
                        height: 3vw;
                    }
                }
            }
        }
    }
</style>